<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:public
     -->
    <div class="QS-content-template QS-public">
        <div class="foods_console">
            <el-button @click="addPublicInfo" class="foods_addFoods_btn" type="primary">添加</el-button>
        </div>



        <el-table
            class="mall_table"
            :data="tableData"
            style="width: 100%"
            max-height="410"
        >
            <el-table-column
                fixed="left"
                prop="publicName"
                label="名称"
                width="calc(10%)">
            </el-table-column>
            <el-table-column
                prop="pictureAddress"
                label="图片地址"
                width="calc(30%)"
            >
                <template slot-scope="scope">
                    <el-image 
                        style="width: 100px; height: 100px"
                        :src="$commonFunc.checkThePic(scope.row.pictureAddress)" 
                        :preview-src-list="[$commonFunc.checkThePic(scope.row.pictureAddress)]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                prop="infoDescription"
                label="描述"
                width="calc(30%)">
            </el-table-column>
            <el-table-column
                prop="isShow"
                label="是否显示"
                width="calc(30%)">
            </el-table-column>
            <el-table-column
                prop="gmtCreate"
                label="创作时间"
                width="calc(10%)">
            </el-table-column>
            <el-table-column
                prop="gmtModifier"
                label="修改时间时间"
                width="calc(10%)">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="calc(10%)">
                <template class="mall_console" slot-scope="scope">
                    <el-button
                        class="mall_console_btn el-icon-edit"
                        @click.native.prevent="editRow(scope.$index, tableData[scope.$index])"
                        type="text"
                    >
                    </el-button>
                    <el-button
                        class="mall_console_btn el-icon-delete"
                        @click.native.prevent="deleteRow(scope.$index, tableData[scope.$index])"
                        type="text"
                    >
                    </el-button>
                    
                </template>
            </el-table-column>
        </el-table>
        <div class="block block_pagenation">
            <!-- <span class="demonstration">直接前往</span> -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="totalNum">
            </el-pagination>
        </div>




        <el-dialog
            title="添加信息"
            :visible.sync="dialogVisible"
            width="60%"
        >
            <div class="mall_add">
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">选择分类</span>
                    <div class="makeFoods_input">
                        <el-select 
                            class="public_select"
                            v-model="selectValue" 
                            clearable 
                            placeholder="请选择"
                            @change="selectChange"
                        >
                            <el-option
                            v-for="item in publicType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div v-show="titleFlag" class="makeFoods_label">
                    <span class="makeFoods_label_tip">{{titleDes}}</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="addDes"
                            placeholder="请输入描述 / 选填"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <div  v-show="!titleFlag" class="makeFoods_label">
                    <span class="makeFoods_label_tip">变更图片</span>
                    <div class="makeFoods_input">
                        <el-upload
                            class="avatar-uploader uploader_small"
                            :action="$commonFunc.imageAPI()"
                            :show-file-list="false"
                            :on-success="changeUrlSuccess"
                            :before-upload="beforeAvatarUpload">
                                <img v-if="changeUrl" :src="$commonFunc.checkThePic(changeUrl)" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">是否显示</span>
                    <div class="makeFoods_input">
                        <el-switch
                            v-model="QSShowFlag"
                            active-color="#309fea"
                            inactive-color="#ccc">
                        </el-switch>
                    </div>
                </div>

                <div class="makeFoods_btn">
                    <el-button @click="resetInfo" type="info" plain>重置</el-button>
                    <el-button @click="publicConfirm" type="primary">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
	components: {
	
	},
	data(){
		return {
            itemId:'',//主键
            isDeleted:'N',//是否删除flag
            tableData: [],//列表数据
            totalNum:10,//数据总数
            currentPage:1,//分页器默认值
            selectValue:'',//select value
            addDes:'',//添加描述
            changeUrl:'',//变更图片
            publicType:[
                {
                    value:'HomePageTitle',
                    label:'首页标题'
                },
                {
                    value:'HomePagePicture',
                    label:'首页图片'
                },
                {
                    value:'CustomerServiceWechat',
                    label:'客服服务微信号'
                },
                // {
                //     value:'solution',
                //     label:'解决方案'
                // },
            ],
            dialogVisible:false,
            itemData:{},
            titleDes:'输入标题',
            titleFlag:true,
            QSShowFlag:true,
		}
    },
    mounted(){
        this.getAllInfo(0);

        
    },
    methods:{
        
        // this.$router.push('/GDPLHasReturned');
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        changeUrlSuccess(res, file) {
            // this.listUrl = URL.createObjectURL(file.raw);
            var _this = this;
            if(this.selectValue == 'HomePagePicture'){
                this.$commonFunc.limitImgWidth(this,file,{
                    width:690,height:300
                },function(url){
                    _this.changeUrl = url;
                });
            }else{
                this.changeUrl = file.response.data.filePath;
            }
        },
        selectChange(){
            console.log('value',this.selectValue)
            if(this.selectValue == 'HomePagePicture'){
                this.titleFlag = false;
            }else{
                this.titleFlag = true;
                if(this.selectValue == 'HomePageTitle'){
                    this.titleDes = '输入标题';
                }else if(this.selectValue == 'CustomerServiceWechat'){
                    this.titleDes = '输入微信号';
                }
            }
        },
        publicConfirm(){
            // this.selectValue = '';//分类id code
            // this.addDes = '';//描述
            // this.changeUrl = '';//图片
            this.saveAllInfo();
        },
        resetInfo(){
            this.selectValue = '';
            this.addDes = '';
            this.changeUrl = '';
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getAllInfo(val);
        },
        saveAllInfo(){
            this.$post("commonInfo/save",{
                // userId:sessionStorage.getItem("userId"),
                id:this.itemId || '',//主键
                pictureAddress:this.changeUrl || '',//图片地址
                infoType:this.selectValue || '',//类型
                infoDescription:this.addDes || '',//图片描述
                isShow:this.QSShowFlag ? 'Y' : 'N',//是否显示
                isDeleted:this.isDeleted || 'N',//是否删除  Y或N
            }).then(res=>{
                console.log(res)
                this.getAllInfo(0);
            })
        },
        getAllInfo(page){
            this.$fetch("commonInfo/findlist",{
                // userId:sessionStorage.getItem("userId"),
                page:page ? page.toString() : '0',//第几页
                Size:'10',//每页大小
                isDeleted:'N',
                // pictureType:'',//图片类型
                // Sort:'',//排序字段,方式
                // isShow:'',//是否显示  Y或N
            }).then(res=>{
                console.log(res)
                this.totalNum = Number(res.total);
                this.tableData.splice(0);
                for(var i = 0;i < res.rows.length;i ++){
                    // 根据主键匹配图片类型或文字描述类型
                    var publicName = '';
                    for(var j = 0;j < this.publicType.length;j ++){
                        if(this.publicType[j].value == res.rows[i].infoType){
                            publicName = this.publicType[j].label;
                        }
                    }
                    if(res.rows[i].infoType != 'solutionOption'){
                        this.tableData.push({
                            // publicName:publicName,//类型名称 - 手动添加
                            // id:res.rows[i].id || '默认数据',//主键
                            // pictureAddress:res.rows[i].pictureAddress || '默认数据',//图片地址
                            // pictureType:res.rows[i].pictureType || '默认数据',//图片类型
                            // pictureDescription:res.rows[i].pictureDescription || '默认数据',//图片描述
                            // gmtCreate:res.rows[i].gmtCreate || '默认数据',//创建时间
                            // gmtModifier:res.rows[i].gmtModifier || '默认数据',//修改时间
                            // isDeleted:res.rows[i].isDeleted || '默认数据',//是否删除
                            // isShow:res.rows[i].isShow || '默认数据',//是否显示
    
                            publicName:publicName,//类型名称 - 手动添加
                            id:res.rows[i].id || '',//主键
                            infoDescription:res.rows[i].infoDescription || '',//描述
                            infoType:res.rows[i].infoType || '',//类型
                            entity:res.rows[i].entity || '',//
                            isDeleted:res.rows[i].isDeleted || '',//是否删除
                            isShow:res.rows[i].isShow == 'Y' ? '是' : '否',//是否显示
                            gmtCreate:this.$commonFunc.timestampToTime(res.rows[i].gmtCreate) || '',//创建时间
                            gmtModifier:this.$commonFunc.timestampToTime(res.rows[i].gmtModifier) || '',//修改时间
                            pictureAddress:res.rows[i].pictureAddress || '',//图片地址
                        });

                    }
                }

                this.dialogVisible = false;
            })
        },
        editRow(index, item) {
            // rows.splice(index, 1);
            console.log('index',index);
            console.log('rows',item);
            this.itemId = item.id;
            this.isDeleted = "N";//修改
            this.addDes = item.infoDescription;
            this.selectValue = item.infoType;//分类
            this.changeUrl = item.pictureAddress;
            this.dialogVisible = true;
        },
        deleteRow(index, item) {
            this.isDeleted = "Y";//删除
            this.selectValue = '';//分类
            this.itemId = item.id;
            this.addDes = item.infoDescription;
            this.changeUrl = item.pictureAddress;

            this.$confirm('确定要删除这一记录？', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
            }).then(() => {
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
                // this.saveAllInfo();
                this.$post("commonInfo/save",{
                    // userId:sessionStorage.getItem("userId"),
                    id:this.itemId,//主键
                    pictureAddress:'',//图片地址
                    infoType:'',//类型
                    infoDescription:'',//图片描述
                    isShow:'N',//是否显示
                    isDeleted:this.isDeleted,//是否删除  Y或N
                }).then(res=>{
                    console.log(res)
                    this.getAllInfo(0);
                })
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
        },
        addPublicInfo(){
            this.itemId = '';
            this.isDeleted = "N";//修改
            this.addDes = '';
            this.changeUrl = '';
            this.dialogVisible = true;
        }
    }
}
</script>